<template>
	<van-form @submit="onSubmit">
		<van-cell-group inset>
			<van-field v-model="username" name="username" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="password" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' }]" />
		</van-cell-group>
		<div style="margin: 16px;">
			<van-button round block type="primary" native-type="submit">
				提交
			</van-button>
		</div>
	</van-form>

</template>

<script setup>
	import {
		showFailToast,
		showSuccessToast
	} from 'vant'
	import router from "@/router"
	import 'vant/es/toast/style';
	import {useUsersStore} from '@/store/user.js'
	import {ref} from 'vue'


	//调用数据
	const userStore = useUsersStore();
	//输出数据
	console.log("userStore", userStore)
	var username = ref("")
	var password = ref("")

	//获取用户名
	// console.log("username", userStore.getUsername)
	// console.log("token", userStore.getToken)
	// console.log("avator", userStore.getAvator)

	// var usernameUpper = ref(localStorage.getItem('username'));

	// function testLocalStorage(values) {
	// 	console.log("保存username")
	// 	//保存username
	// 	localStorage.setItem("username", username.value)
	// 	usernameUpper.value = localStorage.getItem('username')

	// 	//将数据存储到 pinia ->setUsername
	// 	userStore.setUsername(username.value)
	// 	userStore.setToken(token.value)
	// 	userStore.setVavtor(avator.value)
	// }


	function onSubmit(values) {
		console.log("表单提交", values)
		// 1. user.js => 定义调用登录接口的函数
		// 2. 调用上述函数
		// 如果要处理存储的数据，在函数中处理了
		// 如何存储的数据？

		// 调用登录接口
		userStore.login(values)
			// login执行成功
			.then((res) => {
				console.log("接口调用成功", res)
				if (res.code == 0) {
					console.log("用户登录成功")
					// console.log("保存用户数据")
					// userStore.setUsername(res.data.username)
					// userStore.setToken(res.data.token)
					console.log("跳转到用户中心页面")
					showSuccessToast({
						"message": "登录成功",
						"position": "top"
					})
					router.push({
						"name": "usercenter"
					})
				} else {
					console.log("then出错了")
					showFailToast({
						"message": res.message,
						"position": "top"
					})
				}
			})
			// 执行失败
			.catch(err => {
				console.log("出错了~", err)
				showFailToast({
					"message": err,
					"position": "top"
				})
			})
	}
</script>

<style>
</style>
